<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>InputMask - Unicorn Examples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="../assets/demo/demo.css" />

<script type="text/javascript" src="../yui-base.js"></script>
<script type="text/javascript" src="../unicorn.js"></script>

<!--
<script type="text/javascript" src="http://iunicorn.googlecode.com/files/yui-base-2.5.2.min.js"></script>
<script type="text/javascript" src="http://iunicorn.googlecode.com/files/unicorn-0.4.0.min.js"></script>
-->

</head>

<body>

<!-- test widget.InputMask -->
<style type="text/css">
	.panel { width: 620px; border: 1px solid #6997D1; margin: 10px; padding: 10px }
	.panel ul { margin: 0 0 20px 0 }
	.panel ul li { margin: 5px 0; padding: 5px 0; clear: both }
	.panel label { width: 150px; text-align: right; display: block; float: left }
	.panel input { vertical-align: top; float: left; width: 160px }
	
	.tips {
		display: -moz-inline-box; display: inline-block; zoom: 1; *display: inline;
		color: #666;
		width: 260px; height: 15px;
		float: left;
		margin-left: 5px;
		padding-left: 20px
		}
	.warning { background: url('../assets/demo/warning.gif') no-repeat 0 0; padding-left: 20px; /*color: #f50; */ /*font-weight: bold*/ }
	.passed { background: url('../assets/demo/passed.gif') no-repeat 0 0; padding-left: 20px; text-indent: -9999px }
	li.error { background: #FEF4F0 }
	li.current { background: #E7FBFF }
</style>

<div class="panel" id="demo1">
	<pre>
	</pre>
	<form method="post" action="#">
		<ul>
			<li>
				<label for="numberInput">中国的邮政编码：</label>
				<input type="text" value="" size="20" maxlength="6" id="numberInput" />
				<span class="tips">请输入6位数字，比如310099</span>
				<div style="clear: both"></div>
			</li>
			<li>
				<label for="memberInput">淘宝会员名：</label>
				<input type="text" value="" size="20" maxlength="20" id="memberInput" />
				<span class="tips">5-20个字符(可以为字母、数字、下划线和中文，其中一个汉字为两个字符）</span>
				<div style="clear: both"></div>
			</li>
			<li>
				<label for="passwordInput">密码：</label>
				<input type="password" value="" size="20" maxlength="16" id="passwordInput" />
				<span class="tips">密码由6-16个字符组成，请使用英文字母加数字或符号的组合密码，不能单独使用英文字母、数字或符号作为您的密码</span>
				<div style="clear: both"></div>
			</li>
		</ul>
		<div style="clear: both"></div>
	</form>
</div>

<script type="text/javascript">	
Unicorn.util.Event.onDOMReady(function() {

	var D = Unicorn.util.Dom,
		E = Unicorn.util.Event;
	
	// 中国的邮政编码
	Unicorn.widget.SimpleInput.decorate(
		'numberInput',
		{ formatMask: /^\d{6}$/, keyMask: /\d/ }
	);
					
	// 淘宝会员名
	Unicorn.widget.SimpleInput.decorate(
		'memberInput',
		{ formatMask: /^[\w\u4e00-\u9fa5]+$/, 
		  keyMask: /[\w\u4e00-\u9fa5]/,
		  minLength: 5
		}
	);
	
	// 淘宝密码
	var psdInput = new Unicorn.widget.SimpleInput(
		'passwordInput',
		{ formatMask: /^[\x20-\x7e]{6,16}$/, 
		  keyMask: /[\x20-\x7e]/,
		  minLength: 6,
		  maxLength: 16
		}
	);
	var psdTips = D.getElementsByClassName('tips', '*', psdInput.inputEl.parentNode)[0];
	var psdOriginalTips = psdTips.innerHTML;
	
	psdInput.onPass.subscribe(function() {
		var val = this.inputEl.value;

		if(/^\d+$/.test(val)) {
			psdTips.innerHTML = '密码不能全部为数字';
		} else if(/^[a-zA-Z]+$/.test(val)) {
			psdTips.innerHTML = '密码不能全部为字母';
		} else if(/^[^a-zA-Z\d]+$/.test(val)) {
			psdTips.innerHTML = '密码不能全部为符号';
		} else {
			return;
		}
		
		D.removeClass(psdTips, this.config.passedCls);
		D.addClass(this.inputEl.parentNode, this.config.errorCls);
		D.addClass(psdTips, this.config.warningCls);
	}, null, psdInput);
	
	var psdErrorHandler = function() {
		var val = this.inputEl.value;
		if(val.length < this.config.minLength) {
			psdTips.innerHTML = '密码长度不能小于' + this.config.minLength;
		} else if(val.length > this.config.maxLength) {
			psdTips.innerHTML = '密码长度不能大于' + this.config.maxLength;
		} else if(val.length == this.config.maxLength) {
			psdTips.innerHTML = '密码的长度不能超过' + this.config.maxLength;
		} else {
			psdTips.innerHTML = '密码只能由英文字母、数字或英文符号组成';
		}
	};
	psdInput.onError.subscribe(psdErrorHandler, null, psdInput);
	psdInput.onErrorInput.subscribe(psdErrorHandler, null, psdInput);
	
	var psdTipsReset = function() {
		psdTips.innerHTML = psdOriginalTips;
	};
	psdInput.onRightInput.subscribe(psdTipsReset);
	E.on(psdInput.inputEl, 'focus', psdTipsReset);
});
</script>
<a class="reply-link" href="http://lifesinger.org/blog/?page_id=8">&gt;&gt; 期待您的建议与反馈 &lt;&lt;</a>
</body>
</html>
